<template>
  <div class="shell">
    <ul class="images" :style="{ left:index*-100 + '%'}">
      <li class="img" v-for="item in list" :key="item.id" :style="{backgroundImage:item.pic}"></li>
    </ul>
    <ul class="min-images">
      <li v-for="item in list" :key="item.id" :style="{backgroundImage:item.pic}" :class="index === item.id ? 'active':'min'" @click="handler(item.id)"></li>
    </ul>
    <div class="button">
      <div class="button-left" @click="sub">&lt;</div>
      <div class="button-right" @click="add">&gt;</div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  name: 'Rota',
  setup () {
    const index = ref(0)
    const size = 3
    let time = null
    const list = [
      {
        id: 0,
        pic: 'url(' + require('../assets/images/1.jpg') + ')'
      }, {
        id: 1,
        pic: 'url(' + require('../assets/images/2.jpg') + ')'
      }, {
        id: 2,
        pic: 'url(' + require('../assets/images/3.jpg') + ')'
      }
    ]
    const handler = (i) => {
      stop()
      index.value = i
      start()
    }
    const add = () => {
      stop()
      if (index.value >= size - 1) {
        index.value = 0
      } else {
        index.value++
      }
      start()
    }
    const sub = () => {
      stop()
      if (index.value <= 0) {
        index.value = size - 1
      } else {
        index.value--
      }
      start()
    }
    const start = () => {
      time = setInterval(() => {
        add()
      }, 3000)
    }
    const stop = () => {
      clearInterval(time)
    }
    onMounted(() => {
      start()
    })
    return {
      index,
      list,
      handler,
      add,
      sub
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.shell {
  width: 900px;
  height: 500px;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  border: 10px #fff solid;
  box-shadow: 20px 30px 20px rgba(0, 0, 0, 0.5);
}

.images {
  width: 300%;
  height: 100%;
  display: flex;
  position: absolute;
  left: 0;
  /* 所有的属性都变化 */
  transition: 0.2s;
}

.img {
  width: 100%;
  background-size: cover;
}

.min-images {
  display: flex;
  /* 可以使每个元素之间和元素距离边距的距离都相等 */
  justify-content: space-evenly;
  position: absolute;
  bottom: 20px;
  width: 40%;
  z-index: 999;
  right: 10%;
}

.min {
  width: 60px;
  height: 60px;
  cursor: pointer;
  border-radius: 50%;
  background-size: cover;
  border: 5px solid rgba(255, 255, 255, 0.5);
  /* 设置图片的起始位置 */
  background-position: -20px 0;
}
.active {
  width: 60px;
  height: 60px;
  cursor: pointer;
  border-radius: 50%;
  background-size: cover;
  border: 5px solid rgba(160, 193, 255, 0.7);
  /* 设置图片的起始位置 */
  background-position: -20px 0;
}

.button {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: space-between;
  user-select: none;
}

.button-left,
.button-right {
  font-size: 50px;
  background-color: rgba(160, 193, 255, 0.7);
  padding: 0 20px;
  cursor: pointer;
  line-height: 500px;
}
</style>
